<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				margin: 0 auto;
				display: none;
				width: 300px;
				padding: 40px;
				border-radius: 20px;
				background-color: white;
				box-shadow: 1px 1px 10px #666;
			}
			
			ul{
				list-style: none;
				padding: 0;
				margin: 0;
			}
			li{
				padding: 0;
				margin: 0;
				line-height: 40px;
				text-align: center;
			}
		</style>
	</head>
	<button id="users_btn">获取所有用户数据</button>
	<button id="showAdd">添加用户</button>
	<table width="100%">
		<tr><th>编号</th><th>姓名</th><th>评论</th><th>时间</th></tr>
	</table>
	<div>
		<ul>
			<li>用户名: <input type="text" id="username" name="username" required placeholder="请输入用户名"></li>
			<li>评论: <input type="text" id="password" name="password" required placeholder="请输入密码"/></li>
			<li><button id="addUser">添加用户</button></li>
		</ul>
	</div>
	<body>
		<script src="js/jquery.3.6.3.js"></script>
		<script>
			
			//方法  请求用户数据
			function getUsers(){
				$.get('http://test.ctlyt.com/getUsers',function(res){
					//清除表格内容只留下表头
					$("table tr").not(":first").remove();
					//循环创建节点
					for (var i = 0; i < res.length; i++) {
						//创建节点并追加到表格中
						$(`<tr><td>${res[i].uid}</td><td>${res[i].username}</td><td>${res[i].comment}</td><td>${res[i].createtime}</td></tr>`).appendTo($("table"));
					}
				})
			}
			//网页加载完毕执行
			$(function(){
				getUsers();
			})
			//显示div元素
			$("#showAdd").click(function(){
				$("div").show();
			})
			$("#users_btn").click(function(){
				// $.ajax({
				// 	url:'http://127.0.0.1:8080/getUsers',
				// 	type:'GET',
				// 	success: (res) => {
				// 		//清除表格内容只留下表头
				// 		$("table tr").not(":first").remove();
				// 		//循环创建节点
				// 		for (var i = 0; i < res.length; i++) {
				// 			//创建节点并追加到表格中
				// 			$(`<tr><td>${res[i].uid}</td><td>${res[i].username}</td><td>${res[i].password}</td></tr>`).appendTo($("table"));
				// 		}
				// 	}
				// })
				//get方法
				getUsers();
			})
			
			//添加用户
			$("#addUser").click(function(){
				let usernameVal = $("#username").val();
				let passwordVal = $("#password").val();
				//验证数据
				
				//发送添加用户请求
				$.post(
					//请求的地址
					"http://test.ctlyt.com/addUser",
					//请求的数据
					{
						username: usernameVal,
						comment: passwordVal
					},
					//成功的回调
					function(res){
						if(res){
							$("div").hide();
							//请求
							getUsers();
						}else{
							alert("添加失败");
						}
					}
				)
			})
		</script>
	</body>
</html>